<route lang="json5">
{
  style: {
    navigationBarTitleText: '水果商城',
    navigationBarBackgroundColor: '#018d71',
    navigationBarTextStyle: 'white',
  },
}
</route>

<template>
  <!-- needLogin: true, 这个是需要登陆的页面 -->

  <view class="shop-container">
    <!-- 轮播图 -->
    <view class="banner-section">
      <swiper
        class="banner-swiper"
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="500"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.image" mode="aspectFill" class="banner-image" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 商品分类菜单 -->
    <view class="category-section">
      <view class="category-grid">
        <view
          class="category-item"
          v-for="(category, index) in categoryList"
          :key="index"
          @click="selectCategory(category)"
        >
          <view class="category-icon">
            <image :src="category.icon" mode="aspectFit" />
          </view>
          <text class="category-name">{{ category.name }}</text>
        </view>
      </view>
    </view>

    <!-- 商品展示区域 -->
    <view class="products-section">
      <view class="section-header">
        <text class="section-title">精选商品</text>
        <text class="section-more" @click="goToProducts">查看更多</text>
      </view>

      <!-- 快速导航按钮 -->
      <!-- <view class="quick-nav">
        <wd-button type="primary" @click="goToProducts">浏览全部商品</wd-button>
      </view> -->

      <view class="products-grid">
        <view
          class="product-card"
          v-for="(product, index) in state.goodsList"
          :key="index"
          @click="viewProduct(product)"
        >
          <view class="product-image">
            <image :src="product.image" mode="aspectFill" />
            <view class="product-tag" v-if="product.isBest">精品</view>
          </view>
          <view class="product-info">
            <text class="product-name">{{ product.goodsName }}</text>
            <text class="product-desc">{{ product.goodsKeyWords }}</text>
            <view class="product-price-row">
              <text class="product-price">¥{{ product.goodsPrice }}</text>
              <text class="product-original-price" v-if="product.linePrice">
                ¥{{ product.linePrice }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getGoodsInfos, getGoodsInfoById } from '@/service/index/index'
import {
  apiAppIndexGetGoodsInfosPost,
  type GoodsInfoOutput,
  type GoodsInfoInput,
} from '@/service/app'
// 轮播图数据
const bannerList = ref([
  {
    id: 1,
    image: '/static/images/banner1.jpg',
    title: '新鲜水果大促销',
  },
  {
    id: 2,
    image: '/static/images/banner2.jpg',
    title: '进口水果专场',
  },
  {
    id: 3,
    image: '/static/images/banner3.jpg',
    title: '有机水果推荐',
  },
])

// 商品分类数据
const categoryList = ref([
  {
    id: 1,
    name: '苹果',
    icon: '/static/images/category/apple.png',
  },
  {
    id: 2,
    name: '橙子',
    icon: '/static/images/category/orange.png',
  },
  {
    id: 3,
    name: '香蕉',
    icon: '/static/images/category/banana.png',
  },
  {
    id: 4,
    name: '葡萄',
    icon: '/static/images/category/grape.png',
  },
  {
    id: 5,
    name: '草莓',
    icon: '/static/images/category/strawberry.png',
  },
  {
    id: 6,
    name: '西瓜',
    icon: '/static/images/category/watermelon.png',
  },
  {
    id: 7,
    name: '芒果',
    icon: '/static/images/category/mango.png',
  },
  {
    id: 8,
    name: '更多',
    icon: '/static/images/category/more.png',
  },
])

// 商品数据
const productList = ref([
  {
    id: 1,
    name: '红富士苹果',
    description: '新鲜采摘，甜脆可口',
    price: 15.8,
    originalPrice: 19.9,
    image: '/static/images/products/apple.jpg',
    tag: '热销',
  },
  {
    id: 2,
    name: '脐橙',
    description: '果肉饱满，汁多味甜',
    price: 12.5,
    originalPrice: null,
    image: '/static/images/products/orange.jpg',
    tag: '新品',
  },
  {
    id: 3,
    name: '海南香蕉',
    description: '自然成熟，香甜软糯',
    price: 8.9,
    originalPrice: 12.0,
    image: '/static/images/products/banana.jpg',
    tag: null,
  },
  {
    id: 4,
    name: '巨峰葡萄',
    description: '颗粒饱满，甜度适中',
    price: 25.6,
    originalPrice: null,
    image: '/static/images/products/grape.jpg',
    tag: '限时',
  },
  {
    id: 5,
    name: '丹东草莓',
    description: '新鲜采摘，酸甜可口',
    price: 35.8,
    originalPrice: 45.0,
    image: '/static/images/products/strawberry.jpg',
    tag: '特价',
  },
  {
    id: 6,
    name: '海南芒果',
    description: '果肉细腻，香甜浓郁',
    price: 18.9,
    originalPrice: null,
    image: '/static/images/products/mango.jpg',
    tag: null,
  },
])
const state = reactive({
  goodsList: [] as GoodsInfoOutput[],
})

// 选择分类
const selectCategory = (category: any) => {
  uni.showToast({
    title: `选择了${category.name}`,
    icon: 'none',
  })
}

// 获取商品数据
const getGoddsInfo = async () => {
  const param: GoodsInfoInput = { page: 1, pageSize: 20 }
  const res = await apiAppIndexGetGoodsInfosPost({ body: param })
  console.log(res)
  state.goodsList = res.result.items
}

// 查看商品详情
const viewProduct = (product: any) => {
  uni.navigateTo({
    url: `/pages/product/detail?id=${product.id}`,
  })
}

// 加入购物车
const addToCart = (product: any) => {
  uni.showToast({
    title: `${product.name}已加入购物车`,
    icon: 'success',
  })
}

// 查看更多
const viewMore = () => {
  uni.showToast({
    title: '查看更多商品',
    icon: 'none',
  })
}

// 跳转到商品浏览页面
const goToProducts = () => {
  uni.navigateTo({
    url: '/pages/products/index',
  })
}

onMounted(() => {
  // 页面加载完成后的初始化逻辑
  console.log('商城首页加载完成')
  getGoddsInfo()
})
</script>

<style lang="scss" scoped>
.shop-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

// 轮播图样式
.banner-section {
  margin-bottom: 16px;

  .banner-swiper {
    height: 200px;

    .banner-image {
      width: 100%;
      height: 100%;
    }
  }
}

// 分类菜单样式
.category-section {
  padding: 20px 16px;
  margin: 0 16px 16px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 12px;

  .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 8px;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:active {
        background-color: #f0f0f0;
        transform: scale(0.95);
      }

      .category-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
        background: linear-gradient(135deg, #018d71, #00b894);
        border-radius: 50%;

        image {
          width: 32px;
          height: 32px;
        }
      }

      .category-name {
        font-size: 12px;
        color: #333;
        text-align: center;
      }
    }
  }
}

// 商品展示区域样式
.products-section {
  padding: 16px;
  margin: 0 16px 16px;
  background: #fff;
  border-radius: 12px;

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    .section-more {
      font-size: 14px;
      color: #018d71;
    }
  }

  .quick-nav {
    margin-bottom: 16px;

    :deep(.wd-button) {
      width: 100%;
      height: 44px;
      font-size: 16px;
      border-radius: 8px;
    }
  }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    .product-card {
      overflow: hidden;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:active {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
      }

      .product-image {
        position: relative;
        height: 120px;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }

        .product-tag {
          position: absolute;
          top: 8px;
          right: 8px;
          padding: 2px 6px;
          font-size: 10px;
          color: #fff;
          background: #ff4757;
          border-radius: 4px;
        }
      }

      .product-info {
        padding: 12px;

        .product-name {
          display: block;
          margin-bottom: 4px;
          overflow: hidden;
          font-size: 14px;
          font-weight: 600;
          color: #333;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .product-desc {
          display: block;
          margin-bottom: 8px;
          overflow: hidden;
          font-size: 12px;
          color: #666;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .product-price-row {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          .product-price {
            margin-right: 8px;
            font-size: 16px;
            font-weight: 600;
            color: #ff4757;
          }

          .product-original-price {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
          }
        }

        .product-actions {
          :deep(.wd-button) {
            width: 100%;
            height: 32px;
            font-size: 12px;
            border-radius: 6px;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 375px) {
  .category-section .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .products-section .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
</style>
